<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="600px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-form ref="appEdit" label-width="120px" :model="app" :rules="rules">
      <el-form-item label="应用名称" prop="AppName">
        <el-input
          v-model="app.AppName"
          maxlength="50"
          placeholder="流程名"
        />
      </el-form-item>
      <el-form-item label="流程应用分类" prop="AppClassify">
        <treeDicItem
          v-model="app.AppClassify"
          :dic-id="DictItemDic.flowType"
          placeholder="流程应用分类"
        />
      </el-form-item>
      <el-form-item label="选择流程" prop="FlowId">
        <flowInput v-model="app.FlowId" :disabled="app.AppClassify == null" :flow-ver.sync="app.FlowVer" :flow-type="app.AppClassify" placeholder="选择流程" />
      </el-form-item>
      <el-form-item label="应用类型" prop="AppType">
        <el-select v-model="app.AppType" placeholder="应用类型">
          <el-option label="内部应用" :value="0" />
          <el-option label="外部应用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="app.AppType === 0" label="标题模版" prop="TitleTemplate">
        <el-input
          v-model="app.TitleTemplate"
          maxlength="300"
          placeholder="标题模版"
        />
      </el-form-item>
      <el-form-item label="应用说明" prop="AppShow">
        <el-input
          v-model="app.AppShow"
          type="textarea"
          maxlength="100"
          placeholder="应用说明"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { DictItemDic } from '@/flow/config/flowConfig'
import * as appApi from '@/flow/api/flowApp'
import flowInput from '@/flow/components/flow/flowInput.vue'

export default {
  components: {
    flowInput
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    },
    appClassify: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      title: '新增流程应用',
      source: {},
      app: {
        AppName: null,
        AppShow: null,
        AppClassify: null,
        AppType: 0,
        FlowId: null,
        FlowVer: null
      },
      rules: {
        AppName: [
          {
            required: true,
            message: '应用名不能为空！',
            trigger: 'blur'
          }
        ],
        AppClassify: [
          {
            required: true,
            message: '应用分类不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    save() {
      const that = this
      this.$refs['appEdit'].validate((valid) => {
        if (valid) {
          if (that.id) {
            that.set()
          } else {
            that.add()
          }
        } else {
          return false
        }
      })
    },
    async set() {
      await appApi.Set(this.id, this.app)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('close', true)
    },
    async add() {
      await appApi.Add(this.app)
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.$emit('close', true)
    },
    async reset() {
      if (this.id == null) {
        this.title = '新增流程应用'
        this.source = null
        this.app = {
          AppName: null,
          AppShow: null,
          AppClassify: this.appClassify,
          TitleTemplate: null,
          AppType: 0,
          FlowId: null,
          FlowVer: null
        }
      } else {
        const data = await appApi.Get(this.id)
        this.source = data
        this.app = Object.assign({}, data)
        this.title = '编辑流程应用:' + data.AppName
      }
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      if (this.id == null) {
        this.app = {
          AppName: null,
          AppShow: null,
          AppClassify: this.appClassify,
          TitleTemplate: null,
          AppType: 0,
          FlowId: null,
          FlowVer: null
        }
      } else {
        this.app = Object.assign({}, this.source)
      }
    }
  }
}
</script>
